<script setup>
const props = defineProps({
    articleList: Array,
    page: String
})
const emit = defineEmits(['toEdit','toDelete']);
function toEdit(item){
    emit("toEdit",item)
}
function toDelete(item) {
    emit("toDelete",item)
    
}
</script>

<template>


    <section class="resourceItemBox" v-for="item in articleList" @click="navigateTo('/resources/' + item.productId)">
        <div class="resourceItem">
            <div style="display: flex;">
                <div class="itemLeft">
                    <img src="~/assets/resources/index/ZIP@2x.png" alt="">
                    <p>{{ item.fileSuffix }}</p>
                </div>
                <div class="itemRight">
                    <h1 class="title">{{ item.productTitle || item.productName }}</h1>
                    <p class="desc">{{ item.productIntro }}</p>
                </div>
            </div>

            <section v-if="page == 'my'" style="text-align: right;">
                <el-button link type="primary" @click.stop="toEdit(item)">
                    编辑
                </el-button>
                <el-button link type="danger" @click.stop="toDelete(item)">
                    删除
                </el-button>
            </section>
        </div>
    </section>




</template>

<style scoped lang="scss">
h1,h2,p{
    margin: 0;
}
// 多行隐藏
@mixin textoverflow($clamp: 1) {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $clamp;
    /*! autoprefixer: ignore next */
    -webkit-box-orient: vertical;
}

.resourceItemBox {
    padding: 22px 13px;
    padding-bottom: 0;
    border-radius: 10px;
    cursor: pointer;

    &:hover {
        box-shadow: 0 0 8px #c5c5c5;
    }
}

.resourceItem {
    padding-bottom: 22px;
    border-bottom: 1px solid #E5E5E5;
}

.itemLeft {
    margin-right: 17px;
    position: relative;

    img {
        width: 87px;
        height: 87px;
    }

    p {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 30px;
        color: #FFFFFF;

    }
}

.itemRight {
    display: flex;
    flex-direction: column;
    justify-content: center;

    .title {
        font-size: 18px;
        color: #333333;
        margin-bottom: 12px;
        @include textoverflow;
    }

    .desc {
        height: 24px;
        font-size: 16px;
        line-height: 24px;
        color: #666666;
        word-break: break-all;
        @include textoverflow;
    }
}

@media screen and (max-width:768px) {
    .resourceItemBox {
        padding: 15px 10px;
        padding-bottom: 0;
    }

    .resourceItem {
        padding-bottom: 15px;
    }


    .itemLeft {
        margin-right: 10px;

        img {
            width: 67px;
            height: 67px;
        }

        p {
            font-size: 12px;
            bottom: 25px;

        }
    }

    .itemRight {

        .title {
            font-size: 16px;
            margin-bottom: 5px;
        }

        .desc {
            font-size: 14px;
            height: 18px;
            line-height: 18px;
        }
    }

}
</style>